<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="isCsr ? ('Edit CSR' | translate) : ('Edit Certificate' | translate)"
  [loading]="isLoading"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <ix-fieldset>
        <div class="columns">
          <ix-input
            class="column"
            formControlName="name"
            [label]="'Identifier' | translate"
            [required]="true"
            [tooltip]="helptext.edit.name.tooltip | translate"
          ></ix-input>

          @if (form.controls.renew_days) {
            <ix-input
              class="column"
              formControlName="renew_days"
              type="number"
              [label]="'Renew Certificate Days Before Expiry' | translate"
              [tooltip]="helptext.edit.renewDays.tooltip | translate"
            ></ix-input>
          }
          <div class="column"></div>
        </div>
      </ix-fieldset>

      @if (!isCsr) {
        <ix-fieldset>
          <ix-checkbox
            formControlName="add_to_trusted_store"
            [label]="'Add to trusted store' | translate"
          ></ix-checkbox>
        </ix-fieldset>
      }

      @if (certificate) {
        <ix-fieldset [title]="'Subject' | translate">
          <ix-certificate-details
            [certificate]="certificate"
          ></ix-certificate-details>
          <div class="view-actions">
            <button mat-button type="button" ixTest="view-certificate-or-csr" (click)="onViewCertificatePressed()">
              {{ isCsr ? ('View/Download CSR' | translate) : ('View/Download Certificate' | translate) }}
            </button>
            <button mat-button type="button" ixTest="view-key" (click)="onViewKeyPressed()">
              {{ 'View/Download Key' | translate }}
            </button>
          </div>
        </ix-fieldset>
      }

      <ix-form-actions>
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="!form.valid || isLoading"
        >
          {{ 'Save' | translate }}
        </button>
        <ng-container *ixRequiresRoles="requiredRoles">
          @if (isCsr) {
            <button
              mat-button
              type="button"
              ixTest="create-acme-certificate"
              (click)="onCreateAcmePressed()"
            >
              {{ 'Create ACME Certificate' | translate }}
            </button>
          }
        </ng-container>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
